/*
 * @Description: 
 * @Version: 1.0
 * @Autor: c-jack.qian
 * @Date: 2021-04-15 16:11:54
 * @LastEditors: c-jack.qian
 * @LastEditTime: 2021-04-16 14:49:07
 */
let _Vue = null
export default class VueRouter {
    constructor(options) {
        this.options = options;
        this.routerMap = []; //存储路由规则
        // 利用vue实例当中的observer 把把data转成响应式对象
        const currentUrl = window.location.pathname
        this.data = _Vue.observable({
            currrent: currentUrl
        })
    }
    // 静态方法 接受一个vue构造函数
    static install(Vue) {
        // 判断插件是否被注册过
        if (VueRouter.install.isInstalled) {
            return
        }
        VueRouter.install.isInstalled = true
        // 把vue对象记录到全局变量 创建组件router-link和router-view的时候用到
        _Vue = Vue
        // 把router路由对象注入Vue实例中 什么时候？ 创建vue实例的时候 为什么？ 拿到拿到vue实例的      options中的router路由对象
        // 用到Vue混入 mixin
        _Vue.mixin({
            beforeCreate() {
                // 创建vue实例的时候才注入 这个this就是一个vue实例
                if (this.$options.router) {
                    console.log(this);
                    _Vue.prototype.$router = this.$options.router
                    this.$options.router.init()
                }
            }
        })
    }

    init() {
        this.createRouterMap()
        this.initCompoent(_Vue)
        this.initEvent()
    }

    createRouterMap() {
        const { routes } = this.options
        routes.forEach((item) => {
            this.routerMap[item.path] = item.component
        })
    }

    initCompoent(Vue) {
        const vueRouterThis = this
        Vue.component('router-link', {
            props: {
                to: String,
            },
            // template: '<a :href="to"><slot></slot></a>',
            render(h) {
                return h('a', {
                    attrs: {
                        href: this.to
                    },
                    on: {
                        click: this.handleClick
                    }
                }, [this.$slots.default])
            },
            methods: {
                handleClick(e){
                    const url =  this.to
                    vueRouterThis.data.currrent = url
                    history.pushState({},'',url)
                    e.preventDefault()
                }
            }
        })

        
        Vue.component('router-view', {
            render(h){
                const currentUrl = vueRouterThis.data.currrent
                const component = vueRouterThis.routerMap[currentUrl]
                return h(component)
            }
        })
    }
    initEvent(){
         window.addEventListener('popstate', () => {
             this.data.currrent = window.location.pathname
         })   
    }
}